<template>
  <div class="home-menu">
    <ul class="home-menu-ul">
      <li class="home-menu-li" @click="homeLiNav(item)" v-for="item in lis">
        <router-link :to="(item.name=='首页')?('/'):{path:'/search',query:{str:item.name}}" class="home-menu-link">
          <img :src="item.img"/>
          <span>{{item.name}}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "homeMenu",
        data(){
          return {
            lis:[
              {
                name:"首页",
                img:"static/imgs/shouye.png"
              },
              {
                name:"法治要闻",
                img:"static/imgs/yaowen.png"
              },
              {
                name:"法治宣传",
                img:"static/imgs/xuanchuan.png"
              },
              {
                name:"依法治理",
                img:"static/imgs/zhili.png"
              },
              {
                name:"工作指导",
                img:"static/imgs/zhidao.png"
              },
              {
                name:"普法课堂",
                img:"static/imgs/ketang.png"
              },
              {
                name:"经验交流",
                img:"static/imgs/jiaoliu.png"
              },
              {
                name:"扫黑除恶专栏",
                img:"static/imgs/zhuanlan.png"
              },
              {
                name:"公告栏",
                img:"static/imgs/gonggao.png"
              },
              {
                name:"法治视频",
                img:"static/imgs/shipin.png"
              }]
          }
        },

        methods:{
          homeLiNav(str){
            document.querySelector(".home-menu").style.display="none";
            this.$emit('childByValue', str)
          }
        }
    }
</script>

<style scoped lang="scss">
  .home-menu{
    display:none;
    height:100%;
    width:100%;
    max-width:750px;
    margin: 0 auto;
    background:rgba(0,0,0,.5);
    position: fixed;
    left:0;
    right:0;
    top:0;
    z-index:1000;
    .home-menu-ul{
      width:23.2rem;
      height:100%;
      background:url('../../../static/imgs/bg.png') no-repeat;
      padding:1.2rem 0;
      background-size: cover;
      .home-menu-li{
        display: flex;
        align-items: center;

        .home-menu-link{
        display: flex;
        align-items: center;
          width:100%;
          padding:1.2rem 1.9rem;
        img{
          display: block;
          width:2.9rem;
          height:2.9rem;
          margin-right:1.6rem;
        }
        span{
          display: block;
          font-size:1.6rem;
          line-height:2.3rem;
          color:white;
        }
        }

      }
    }
  }
</style>
